<template>
  <page :title="title" :light="false" navColor="#fff" ref="pageRef">
    <view style="background-color: #fff">
      <view class="overflow-hidden paddingT10">
        <swiper
          @change="bannerChange"
          :current="active"
          class="screen-swiper"
          :indicator-dots="false"
          circular="true"
          duration="400"
        >
          <swiper-item v-for="(item, index) in products" :key="index">
            <view class="image-wrapper">
              <!--							<image :src="data['cover' + item.level]" class='image' mode='aspectFit' />
                            <view class='exchange' :style="{ backgroundImage: 'url(' + ossurl.box.detail.exchangeTextBg + ')', }"
                                  @click='gotoDetail(item.spu.id)'>
                                <image :src='item.spu.cover' class='image' mode='aspectFit' />
                            </view>-->
              <image :src="item.spu.cover" class="image" mode="aspectFit" />
              <image
                class="super-text translateX"
                :src="LEVEL_MAP[item.level].titleImg"
              />
              <view class="swiperIndex font6">
                <span class="current">{{ index + 1 }}</span>
                /{{ products.length }}
              </view>
            </view>
            <view class="content-wrapper font2">
              <view class="flex-align">
                <text
                  style="font-size: 14px; font-family: Helvetica, sans-serif"
                >
                  {{ data.name }} {{ LEVEL_MAP[item.level].title }} {{ title }} 手办(每购买一盒获赠一件商品，官方零售价{{
                    data.price
                  }}元，获得概率约为{{ showRatio(data, item) }})
                </text>
              </view>

              <!--							<view class='flex-align paddingT8'>
                                <view style='color: #666666; width: 120rpx'>名称：</view>

                                <text style='color: #000000' class='marginL10'>
                                    {{ data.name }}
                                </text>
                            </view>

                            <view class='flex-align paddingT8'>
                                <view style='color: #666666; width: 120rpx'
                                >官方零售价格：
                                </view>

                                <text style='color: #000000' class='marginL10'>
                                    {{ data.price }}元
                                </text>
                            </view>

                            <view class='flex-align paddingT8'>
                                <view style='color: #666666; width: 120rpx'>参数：</view>
                                <scroll-view
                                    scroll-x
                                    class='flex1 scroll-wrapper'
                                    v-if='item.spu && item.spu.parameter'>
                                    <view
                                        v-for='param in JSON.parse(item.spu.parameter)'
                                        :key='param.label'
                                        class='item'>
                                        <view style='color: #000000'>{{ param.label }}</view>
                                        <view style='color: #666666'>{{ param.value }}</view>
                                    </view>
                                </scroll-view>
                            </view>

                            <view class='paddingT8 flex-align' v-if='item.spu.brandName'>
                                <view style='color: #666666; width: 120rpx'>其他：</view>
                                <text style='color: #000000' class='marginL10'>
                                    {{ title }} {{ item.spu.brandName }}
                                </text>
                            </view>-->
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="content-wrapper font2">
        <view class="flex-align paddingT8" style="padding-bottom: 8rpx">
          <view style="color: #666666; width: 120rpx" class="flex-shrink0"
            >温馨提示:</view
          >
          <text style="color: #000000" class="marginL10">
            您购买的是盲盒类商品，盲盒内商品存在随机性，且盲盒内商品市场价值存在差异(每个盲盒开出的商品价值请参照官方商城指导价)，提醒您谨慎购买，理性消费！
          </text>
        </view>

        <view
          class="flex"
          v-for="(item, index) of messageList"
          :key="index"
          style="margin-top: 3px"
        >
          <view style="color: #666666; width: 120rpx" class="flex-shrink0">
            {{ item.title }}:
          </view>
          <text style="color: #000000" class="marginL10">
            {{ item.content }}
          </text>
        </view>
      </view>
      <view class="rell_product">
        <image
          class="width100 height100"
          :src="resource.real100"
          mode="widthFix"
        />
      </view>
      <detail v-if="productDetail" :data="productDetail" />
    </view>
  </page>
</template>

<script>
import { LEVEL_MAP } from '@/utils/config';
import checkout from './../award_detail/checkout';
import resource from '@/utils/resource';
import detail from './detail';
import ossurl from '@/utils/ossurl';
export default {
  components: {
    checkout,
    detail,
  },
  data() {
    return {
      ossurl,
      resource,
      LEVEL_MAP,
      poolId: null,
      active: 0,
      data: null,
      products: [],
      productDetail: null,
      title: '',
      scrollTop: 0,
      messageList: [],
      swiperIndex: 0,
      lengthAll: 0,
      box: null,
    };
  },
  onLoad(options) {
    this.poolId = options.poolId;
    this.active = options.index;
    this.loadData();
  },
  mounted() {
    setTimeout(() => {
      this.getData(true);
    }, 100);
  },
  computed: {
    hide() {
      return !this.$store.state.hide;
    },
    statusBarHeight() {
      if (this.$store.state.systemInfo) {
        return this.$store.state.systemInfo.statusBarHeight;
      }
      return 20;
    },
    headerBg() {
      return this.scrollTop > 0 ? '#fff' : 'transparent';
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    changeFun(e) {
      console.log('shu', e);
      this.swiperIndex = e.current;
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: '/subPackages/pages/product/index?spuId=' + id,
      });
    },
    async loadData() {
      const list = await this.$service.user.getParamConfig('pool_list_show');
      let listArr = list.data.split(',');
      let item = listArr.find((e) => {
        return e == this.poolId;
      });
      if (item) {
        this.messageList = [
          {
            content:
              '宝箱商品一件起发，包邮，支持七天无理由退货，默认京东快递。',
            createTime: '2024-03-07 15:23:49',
            title: '运费规则',
          },
        ];
      } else {
        const res = await this.$service.base.message(0, 20);
        this.messageList = res;
      }
    },
    async getData(loading = false) {
      const res = await this.$service.award.detail(this.poolId, loading);
      if (res.mode == 'YFS_PRO') {
        const resbox = await this.$service.award.box(
          this.poolId
        );
        let map = {}
				if (resbox.usedStat) {
					resbox.usedStat.forEach((item) => {
						map[item.spuId] = item
					})
				}
				resbox.usedStat = map
        this.box = resbox;
      }
      this.data = res;
      if (res) {
        this.products = res.luckGoodsList;
        this.lengthAll = this.products.length;
        this.productDetail = this.products[this.active].spu;
        this.title = this.products[this.active].name;
      }
    },

    async pay(num) {
      const res = await this.$service.award.preview(this.poolId, num);
      if (res) {
        this.$refs.checkoutRef.show(num, res);
        this.lock = true;
      }
    },
    onSuccess(param) {
      this.$cache.set(this.$cache.key.AWARD_GOODS, this.products);
      if (param.num >= 10) {
        this.$router.push('lottery_more', param);
      } else {
        this.$router.push('lottery', param);
      }
      setTimeout(() => {
        this.getData(false);
      }, 500);
    },
    bannerChange(e) {
      this.active = e.detail.current;
      this.productDetail = {
        ...this.products[this.active].spu,
      };
      this.title = this.products[this.active].name;
    },
    getLeftNum(row) {
      if (
        !this.box ||
        !this.box.usedStat ||
        !this.box.usedStat[row.spu.id] ||
        !this.box.usedStat[row.spu.id].quantity
      ) {
        return row.quantity;
      }
      return row.quantity - this.box.usedStat[row.spu.id].quantity;
    },
    getProbability(row) {
      if (!this.box) return;
      let leftNum = this.getLeftNum(row);
      return (
        this.$common.ignoreRatio0(
          ((leftNum / this.box.leftQuantity) * 100).toFixed(4)
        ) + '%'
      );
    },
    showRatio(data, row) {
      if (data.mode === 'UNLIMITED') {
        return this.$common.ignoreRatio0(row.probability) + '%';
      } else if (data.mode === 'YFS_PRO') {
        return this.getProbability(row);
      }
    },
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.swiperSection {
  position: relative;
  .textSwiper {
    padding: 32rpx;
    margin: 28rpx;
    background: #fffcf4;
    border-radius: 12rpx;
  }
  .infoSwiper {
    position: absolute;
    left: 0;
    top: 600rpx;
    z-index: 10;
    width: 100%;
    .super-text {
      width: 100%;
      image {
        width: 180rpx;
        height: 64rpx;
        margin: 0 auto;
      }
    }
    .swiperIndex {
      position: absolute;
      right: 40rpx;
      bottom: 20rpx;
      font-size: 20rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 500;
      color: #fec433;
      width: 84rpx;
      height: 32rpx;
      background: #000000;
      border-radius: 708rpx 708rpx 708rpx 708rpx;
      text-align: center;
      line-height: 32rpx;

      .current {
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }
}
.fill-height {
  height: 168rpx;
}

.pagae-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  align-items: center;

  .title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    line-height: 72rpx;
    width: 500rpx;
  }

  .back {
    z-index: 1800;
    font-size: 32rpx;
    line-height: 32rpx;
    position: absolute;
    left: 20rpx;
    top: 24rpx;
  }
}

.bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #171b1e;
  height: 168rpx;
  padding-bottom: 40rpx;

  .bottom-btns {
    height: 128rpx;

    .text {
      width: 100px;
      text-align: center;
      position: absolute;
      bottom: 26rpx;
      font-size: 24rpx;
      color: #fff;
    }
  }

  .image {
    height: 108rpx;
    width: 100%;
  }
}

.content-wrapper {
  padding: 32rpx;
  margin: 28rpx;
  background: #fffcf4;
  border-radius: 12rpx;
}

.screen-swiper {
  min-height: 1000rpx;

  swiper-item {
    position: relative;
  }

  .image-wrapper {
    height: 780rpx;
    position: relative;

    .exchange {
      position: absolute;
      left: 40rpx;
      bottom: 20rpx;
      font-weight: 700;
      display: flex;
      padding: 20rpx;
      border-radius: 20rpx;
      height: 228rpx;
      width: 170rpx;
      background-size: 100% 100%;
      padding-top: 28rpx;

      .image {
        width: 170rpx;
        height: 200rpx;
      }
    }

    .image {
      height: 660rpx;
      width: 100%;
    }

    .super-text {
      position: absolute;
      bottom: 20rpx;
      width: 180rpx;
      height: 64rpx;
    }

    .swiperIndex {
      position: absolute;
      right: 40rpx;
      bottom: 20rpx;
      font-size: 20rpx;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 500;
      color: #fec433;
      width: 84rpx;
      height: 32rpx;
      background: #000000;
      border-radius: 708rpx 708rpx 708rpx 708rpx;
      text-align: center;
      line-height: 32rpx;

      .current {
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }

  .content-wrapper {
    .scroll-wrapper {
      padding-left: 20rpx;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;

      .item {
        display: inline-block;
        padding: 0 20rpx;
        border-right: 2rpx solid #565758;

        &:first-child {
          padding-left: 0;
        }
      }
    }
  }
}

.rell_product {
  height: 306rpx;
  margin: 28rpx;
}
</style>
